<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
  基础信息管理
</blockquote>
<div class="layui-card layui-panel">
  <div class="layui-card-header">
    供应商资料
  </div>
  <div class="layui-card-body">
    <form  action="http://localhost:8080/jxc01/obscureVendor" method="post">
               <span>
               <input type="text" name="suppliername" placeholder="供应商名称" style="width: 120px;height: 28px" >
               <button class="layui-btn" type="submit">查找</button></span>
<!--      <button class="layui-btn"><a href="">添加</a></button>-->
      <button type="button" class="layui-btn layui-btn-primary" lay-on="page">添加</button>
    </form>
<!--    <table class="layui-hide" id="ID-table-demo-data"></table>-->
    <table class="layui-hide" id="ID-table-demo-data" lay-filter="test"></table>
  </div>
</div>


<!--选定条目，编辑已有数据-->
<form id="editForm" method="post" action="http://localhost:8080/jxc01/reviseVendor" hidden = "hidden">
  <!--    <div style="margin:15px 5px 10px 5px"> 类别：<input type="text" id="edit_category"></div>-->
  <!--    <div style="margin:15px 5px 10px 5px"> 备注：<input type="text" height="30px" id="edit_annotation" maxlength="100"></div>-->
  <input type="text" id="id" name="id" hidden="hidden"/><br/>
  供应商名称:<input type="text" id="suppliername" name="suppliername" placeholder="供应商名称" value=""/><br/>
  负责人:<input type="text" id="headname" name="headname" placeholder="负责人" value=""/><br/>
  供应商电话:<input type="text" id="phone" name="phone" placeholder="供应商电话" value=""/><br/>
  供应商地址:<input type="text" id="address" name="address" placeholder="供应商地址" value=""/><br/>
  银行:<input type="text" id="bank" name="bank" placeholder="银行" value=""/><br/>
  <!--银行卡号:<input type="text" name="" placeholder="银行卡号" value=""/><br/>-->
  更新时间:<input type="text" id="updatetime" name="updatetime" placeholder="描述信息" value=""/><br/>
  <input type="button" value="取消" style="float: right">
  <input type="submit" value="确认" style="float: right">
</form>
</body>
<script src="layui/layui.js"></script>
<script src="js/jquery-3.7.0.js"></script>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  layui.use(function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    util.on('lay-on', {
      page: function(){
        // 页面层
        layer.open({
          type: 1,
          btn:['确定','取消'],
          area: ['420px', '240px'], // 宽高
          content: '<div style="padding: 11px;"><form action="http://localhost:8080/jxc01/addVendor" method="post">\n' +
                  '        供应商名称:<input type="text" name="suppliername" placeholder="供应商名称" value=""/><br/>\n' +
                  '        负责人:<input type="text" name="headname" placeholder="负责人" value=""/><br/>\n' +
                  '        供应商电话:<input type="text" name="phone" placeholder="供应商电话" value=""/><br/>\n' +
                  '        供应商地址:<input type="text" name="address" placeholder="供应商地址" value=""/><br/>\n' +
                  '        银行:<input type="text" name="bank" placeholder="银行" value=""/><br/>\n' +
                  '        <!--银行卡号:<input type="text" name="" placeholder="银行卡号" value=""/><br/>-->\n' +
                  '        描述信息:<input type="text" name="" placeholder="描述信息" value=""/><br/>\n' +
                  '        <input type="submit" value="确认" style="float: right">\n' +
                  '</form></div>'
        })
      }
    });
    // 提交事件
    form.on('submit(demo-submit)', function(data){
      var field = data.field; // 获取表单全部字段值
      var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
      var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });
      // 此处可执行 Ajax 等操作
      // …
      return false; // 阻止默认 form 跳转
    });
  });
  layui.use('table', function(){
    var table = layui.table;
    // 已知数据渲染
    var inst = table.render({
      elem: '#ID-table-demo-data',
      url:'http://localhost:8080/jxc01/queryVendor',
      cols: [[ //标题栏
        {field: 'id', title: 'ID', width: 80, sort: true},
        {field: 'suppliername', title: '供应商名称', width: 200},
        {field: 'headname', title: '负责人', width: 100},
        {field: 'phone', title: '电话', minWidth: 140},
        {field: 'address', title: '地址', minWidth: 150},
        {field: 'bank', title: '银行', width: 140},
        {field: 'creationtime', title: '创建时间', width: 180, sort: true},
        {field: 'updatetime', title: '更新时间', width: 180, sort: true},
        {field: 'operate', title: '操作', width: 160,toolbar:"#bar"}
      ]],
      //skin: 'line', // 表格风格
      //even: true,
      page: true, // 是否显示分页
      limits: [5, 10, 15],
      limit: 5 // 每页默认显示的数量
    });
    // 触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的DOM对象
      var jsonData = JSON.stringify(data);

      if(layEvent === 'edit'){
        layer.open({
          title: '编辑信息id:'+ data.id,
          type: 1,
          area: ['40%','40%'],
          content : $('#editForm'),
          btn: ['确定', '取消'],
          shade: [0.8, '#393D49'],
          success : function(layer,index) {
            //此处"#edit_username"需对应最上面的表单中的字段id="",val(data.username)这个对应数据库中的字段
            $("#id").val(data.id);
            $("#suppliername").val(data.suppliername);
            $("#headname").val(data.headname);
            $("#phone").val(data.phone)
            $("#address").val(data.address);
            $("#bank").val(data.bank);
            $("#updatetime").val(data.updatetime);
            // $("#edit_authority").val(data.authority);
          },
        });
      } else if(obj.event === 'del'){
        layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
          obj.del(); // 删除对应行（tr）的DOM结构
          align: 'right'; // 右对齐弹出
          style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
          $.ajax({
            type:'post',
            url:"http://localhost:8080/jxc01/deleteVendor?id="+data.id,
            dataType:"json"
          })
          $.ajax({
            type:'post',
            url:"http://localhost:8080/jxc01/queryVendor",
            dataType:"json"
          })
          window.location.href="gongyingshang.html"
          layer.close(index);
        });
      }
    });

  });

</script>
</html>